<template>
    <div>
        <headers></headers>   
        <div style="height:calc(100vh - 3.69rem);overflow: auto;">
            <pdf
                ref="pdf"
                :src="url"
                v-for="i in numPages"
                :key='i'
                :page="i"
                @num-pages="pageCount=$event"
                @progress="progressAll"
                @page-loaded="currentPage=$event"
                v-loading='loading'
            ></pdf>
            <div v-if="disabled" style="height:40px;display: flex;justify-content: center;align-items: center;width:100%;">
                <van-button type="info" class="button" size='mini' @click="load"
                    style="width:100%;"
                >点击加载更多....</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import headers from '../header'
import pdf from 'vue-pdf'
import {mapGetters} from 'vuex'
export default {
    components:{headers,pdf},
    computed:{...mapGetters(['http'])},
    data(){
        return {
            // 当前页数
            currentPage: 0,
            // 总页数
            pageCount: 0,
            numPages:5,
            pagenum:10,
            url:'', 
            disabled:true,
            loading:false
        }
    },
    created() {
        // this.url = '/path'+this.$route.query.src.split('com')[1]
        this.url = this.$route.query.src
        this.getNumPages()
    },
    methods: {
        //无限滚动
        load () {
            this.loading=true
            if(this.numPages>=this.pageCount){
                this.disabled=false
            }else{
                this.disabled=true
                this.numPages += 5
                if(this.numPages+5>=this.pageCount){
                    this.loading=false
                    this.disabled=false
                }
            }
        },
        async getNumPages() {
            let loadingTask = pdf.createLoadingTask(this.url)
            this.loading=true
            await loadingTask.promise.then(pdf => {
                this.pagenum = pdf.numPages
            }).catch(err => {
                console.error('pdf 加载失败', err);
            })
            this.loading=false
        },
        //加载完成
        progressAll(e){
            if(e == 1){
                this.loading=false
            }
        },
    },
}
</script>

<style lang="scss" scoped>
// .border{
//     overflow: auto;
//     height:
// }
a{
    position:absolute;
}
</style>